<script setup>
import {ref, reactive, onMounted} from "vue";
import {loginApi,getMajors,registApi,isPhoneExist} from "@/apis/index.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

let isLogin = ref(true)
//登录对象
let LoginUser = reactive({
  account:'',
  passWord:'',
  role:0
})
//注册对象
const student = reactive({
  id:null,
  name: null,
  age: null,
  phone: null,
  enrollmentDate: null,
  major: null
});
let majors = reactive([])
const router = useRouter()
async function login(){
  let result= await loginApi(LoginUser.account,LoginUser.passWord)
  if(result.message==='-1'){
    ElMessage.error('账号或密码错误')
    LoginUser.account=''
    LoginUser.passWord=''
  }else {
    localStorage.setItem('token',result.result)
    console.log(localStorage.getItem('token'))
    console.log(result)
    if (result.message==='2'){
      try {
        let account=LoginUser.account
        console.log(account)
        await router.push({name:'changeWord',query:{account:account}})
      } catch (error) {
        console.error('路由跳转失败', error)
      }
    }else{
      console.log('判定权限')
      let account=LoginUser.account
      console.log(account)
      result.message==='1'?
          await router.push({name:'admin', query:{account:account}}):
          await router.push({name:'selectCourse',query:{account:account}})
    }
  }
}

onMounted(async ()=>{
  majors=await getMajors();
  console.log(majors)})
const validatePhone =async (rule, value, callback) => {
  const phonePattern = /^1[3-9]\d{9}$/;
  if (!value) {
    callback(new Error("手机号不能为空"));
  } else if (!phonePattern.test(value)) {
    callback(new Error("请输入有效的手机号"));
  } else {
    let re=await isPhoneExist(value)
    if (re===true){
      callback(new Error("手机号已存在"))
    }else {
      callback()
    }
  }
};
async function regist () {
  let re = await registApi(student);
  if (re === null) {
    ElMessage.error("注册失败")
  } else {
    isLogin.value = !isLogin.value
    LoginUser.account = re.account;
    LoginUser.passWord = re.password;
    LoginUser.role = re.role;
  }
}
</script>
<template>
  <div class="box">
    <div class="continer">
      <div class="right" :class="{ 'show': isLogin }">
        <el-form v-show="isLogin" v-model="LoginUser">
          <el-form-item>
            <h2 style="color: silver">登录</h2>
          </el-form-item>
          <el-form-item prop="username">
            <el-input type="text" placeholder="用户名" v-model="LoginUser.account"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" placeholder="密码" v-model="LoginUser.passWord" show-password></el-input>
          </el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form>
       <!--注册-->
        <el-form :model="student" ref="formRef" @submit.prevent="regist" v-show="!isLogin">
          <el-form-item prop="name" :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]">
            <el-input v-model="student.name" placeholder="请输入姓名"></el-input>
          </el-form-item>

          <el-form-item  prop="age" :rules="[{ required: true, message: '年龄不能为空', trigger: 'blur' }]">
            <el-input v-model="student.age" type="number" placeholder="请输入年龄"></el-input>
          </el-form-item>

          <el-form-item  prop="phone" :rules="[{ required: true, message: '手机号不能为空', trigger: 'blur' }, { validator: validatePhone, trigger: 'blur' }]">
            <el-input v-model="student.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>

          <el-form-item  prop="enrollmentDate" :rules="[{ required: true, message: '入学时间不能为空', trigger: 'change' }]">
            <el-date-picker value-format="YYYY-MM-DD" format="YYYY/MM/DD" v-model="student.enrollmentDate" type="date" placeholder="选择入学时间"></el-date-picker>
          </el-form-item>
            <el-select v-model="student.major" placeholder="请选择专业" style="width: 60%">
              <el-option v-for="(major, index) in majors" :key="index" :label="major.name" :value="major"></el-option>
            </el-select>
            &nap;
          <el-form-item>
            <el-button type="primary" @click="regist">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right" :class="{ 'show': !isLogin }">
        <div class="change">
          <h2>欢迎访问</h2>
          <p></p>
          <h2>学生管理系统</h2>
          <el-button style="margin-top: 40%; margin-left: 5%" @click="isLogin=!isLogin">{{isLogin? '还没有账号？点击注册':'已经有账号？登录'}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  background-image: url(https://images.unsplash.com/photo-1730460042828-89bc39c6d833?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw3fHx8ZW58MHx8fHx8);
}
.continer {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 450px;
  border-radius: 10px;
//box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  transform: translateX(100%);
  background-image: url(https://images.unsplash.com/photo-1730386114645-1548682d1577?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxMnx8fGVufDB8fHx8fA%3D%3D);
}

.right.show {
  transform: translateX(0);
  background-color: rgb(194, 218, 213,0.5);
  background-image: url(https://images.unsplash.com/photo-1730386114645-1548682d1577?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxMnx8fGVufDB8fHx8fA%3D%3D);
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>